<template>
	<el-form ref="formRef" :model="formData" :rules="formRules" label-width="10em">
		<el-row type="flex" :gutter="10">
			<el-col :span="24">
				<el-form-item label="分类图标" prop="imgList">
					<el-upload-image v-model="formData.imgList" :title="title"></el-upload-image>
				</el-form-item>
			</el-col>
			<el-col :span="12">
			    <el-form-item label="分类上级" prop="parent_id">
			        <el-cascader
			           v-model="formData.parent_id"
			           :options="options"
					   :props="{
					       value:'id',
					       label:'name'}"
			           @change="handleChange">
					   </el-cascader>
			    </el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="分类名称" prop="name">
					<el-input v-model="formData.name" placeholder="请输入分类名称" type="text" clearable></el-input>
				</el-form-item>
			</el-col>
			<!-- <el-col :span="12">
			   <el-form-item label="赠送积分比例(%)" prop="score_rate">
			        <el-input
			            v-model="formData.score_rate"
			            clearable
						type="number"
			            placeholder="100% 填100，1.5% 填1.5 ，0为不赠送"
			        ></el-input>
			    </el-form-item>
			</el-col> -->
			<el-col :span="12">
				<el-form-item label="排序" prop="sort">
					<el-input v-model="formData.sort" placeholder="请输入排序号" type="text" clearable></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="启用状态" prop="status">
					<el-switch v-model="formData.status" :active-value="1" :inactive-value="0"></el-switch>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row type="flex" justify="center">
			<el-button type="primary" icon="el-icon-check" @click="onConfirm">完成{{ current + 1 }}/{{ selection.length }}
			</el-button>
			<el-button type="default" icon="el-icon-close" @click="onCancel">取消</el-button>
		</el-row>
	</el-form>
</template>

<script>
	import {
		post,get
	} from "@/assets/js/http.js";

	export default {
		name: "goods-type-edit",
		components: {
			ElUploadImage: () => import("@/components/el-upload-image.vue")
		},
		props: {
			selection: {
				type: Array,
				default: () => []
			}
		},
		watch: {
			selection() {
				this.setFormData();
			}
		},
		data() {
			return {
				current: 0,
				props: {
					label: "name",
					value: "id",
					children: "children",
					checkStrictly: true
				},
				formData: {
					imgList: [],
					image_id: "",
					name: "",
					sort: "",
					status: 1,
					// score_rate:'',
					parent_id:'',
				},
				formRules: {
					imgList: [{
						required: true,
						message: '请输入',
						trigger: 'change'
					}],
					// parent_id: [{
					// 	required: true,
					// 	message: '请选择',
					// 	trigger: 'change'
					// }],
					name: [{
						required: true,
						message: "此项为必填项"
					}],
					// score_rate: [{
					// 	required: true,
					// 	message: "此项为必填项"
					// }],
					sort: [{
							required: true,
							message: "此项为必填项"
						},
						{
							pattern: /^[1-9]\d*$/,
							message: "只能输入正整数"
						}
					],
					status: {
						required: true,
						message: "此项为必填项"
					}
				},
				options:[],
				title:'请上传 112rpx * 104rpx 的图片'
			};
		},
		mounted() {
			this.setFormData();
			this.getoptions()
		},
		methods: {
			setFormData() {
				const data = this.selection[this.current];
				console.log(data, 'data', this.selection)
				this.formData.id = data.id;
				this.formData.imgList = [{ url: data.url ,name:data.url}];
				this.formData.name = data.name;
				this.formData.score_rate = data.score_rate;
				this.formData.sort = data.sort;
				this.formData.status = data.status;
				this.formData.image_id = data.image_id;
				this.formData.parent_id = data.parent_id
			},
			onConfirm() {
				this.$refs.formRef.validate(async isValid => {
					if (isValid) {
						const formData = JSON.parse(JSON.stringify(this.formData));
						console.log(formData,'formData',formData.image_id + '')
						if (formData.imgList.length > 0) {
							formData.image_id =
								formData.imgList[0].id||formData.image_id;
						}
						formData.parent_id = formData.parent_id[0]
						await post({
							url: "/admin/shop.GoodsCategory/edit",
							data: formData,
							loading: true,
							successTip: true
						});
						if (this.current === this.selection.length - 1) {
							this.$emit("update");
							this.$parent.$emit("update:visible", false);
							this.$refs.formRef.resetFields();
						} else {
							this.current += 1;
							this.setFormData();
						}
						// this.$emit("update");
						// this.$parent.$emit("update:visible", false);
						// this.$refs.formRef.resetFields();
					}
				});
			},
			onCancel() {
				if (this.current > 0) {
					this.$emit("update");
				}
				this.$parent.$emit("update:visible", false);
				this.$refs.formRef.resetFields();
			},
			//获取父类
			getoptions(){
				get({
					url:'/admin/shop.GoodsCategory/levelCate',
					params:{
						limit:999
					},
				}).then(res=>{
					this.options = res.list
				})
			},
			 handleChange(value) {
			        console.log(value);
			      }
		}
	};
</script>
